<template>
    <div  style="background: #fff;min-height: calc(100vh)">
        <van-nav-bar left-arrow @click-left="back()"/>
        <div style="padding: 0 15px">
            <van-form style="margin-top: 15px;" label-width="4em" label-align="center">
                <van-field required v-model="group_name" label="分组" readonly
                           clickable placeholder="点击选择分组" @click="showPicker = true"/>
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker :default-index="group_active"
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    />
                </van-popup>
                <van-field required v-model="form.username" label="姓名" placeholder="填写姓名或者昵称" />
                <van-field required v-model="form.mobile" label="电话" placeholder="填写电话号码" />
                <van-field required name="radio" label="性别">
                    <template #input>
                        <van-radio-group required v-model="form.sex" direction="horizontal">
                            <van-radio :name="1">男</van-radio>
                            <van-radio :name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>

                <van-field required v-model="form.age" label="年龄" placeholder="填写年龄">
                    <template #button> 岁 </template>
                </van-field>
                <van-field v-model="form.height" label="身高" placeholder="填写身高">
                    <template #button> cm </template>
                </van-field>
                <van-field v-model="form.weight" label="体重" placeholder="填写体重">
                    <template #button> kg </template>
                </van-field>
                <div style="margin: 26px 10px;">
                    <van-button round block type="info" @click="update()">提 交</van-button>
                    <van-button v-if="form.id" round block style="margin-top: 15px" @click="destroy()" type="default">删 除</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import {Group,MemberUpdate,MemberDestroy,MemberInfo} from '@/utils/request';
import {Dialog} from "vant";
export default {
    data() {
        return {
            form: {
                id: 0,
                username: '',
                mobile: '',
                height: '',
                age: '',
                sex: 1,
                weight: '',
                group_id: '',
            },
            group_active: 0,
            columns: [],
            group_name: '',
            showPicker: false,
            groups: []
        }
    },
    activated() {
        this.$store.dispatch('setActive', 4);
       if(this.$route.query.id){
           this.detail(this.$route.query.id);
       }else{
           this.form.id = 0;
           this.form.username = '';
           this.form.mobile = '';
           this.form.height = '';
           this.form.age = '';
           this.form.sex = 1;
           this.form.weight = '';
           this.form.group_id = this.$route.query.gid;
           this.group_name = ''
       }
        this.group();
    },
    methods: {
        detail(id){
            MemberInfo({params: {id: id}}).then((res)=>{
                if (res.code == 0) {
                    this.form.id = res.data.id;
                    this.form.username = res.data.username;
                    this.form.mobile = res.data.mobile;
                    this.form.height = res.data.height;
                    this.form.age = res.data.age;
                    this.form.sex = res.data.sex;
                    this.form.weight = res.data.weight;
                    this.form.group_id = res.data.group_id;
                }
            })
        },
        group(){
            this.groups = [];
            Group().then((res)=>{
                if (res.code == 0) {
                    this.groups = res.data.data;
                    this.groups.forEach((v,index)=>{
                        if(this.$route.query.gid == v.id){
                            this.group_active = index;
                            this.group_name = v.name;
                        }
                        this.columns.push(v.name);
                    });
                }
            })
        },
        onConfirm(value, index) {
            this.group_name = value;
            this.form.group_id = this.groups[index].id;
            this.showPicker = false;
        },
        update(){
            if(!this.form.group_id){
                Dialog.alert({message: '请选择分组', confirmButtonText: '知道了'});
                return false;
            }
            if(!this.form.username){
                Dialog.alert({message: '请填写姓名或者昵称', confirmButtonText: '知道了'});
                return false;
            }
            if(!this.form.mobile){
                Dialog.alert({message: '请填写电话号码', confirmButtonText: '知道了'});
                return false;
            }
            if(!this.form.age){
                Dialog.alert({message: '请填写年龄', confirmButtonText: '知道了'});
                return false;
            }
            MemberUpdate(this.form).then((res)=>{
                if(res.code == 0){
                    this.back();
                }
            });
        },
        destroy(){
            Dialog.confirm({
                message: '确定要删除该档案吗？',
                beforeClose: (action, done)=>{
                    if (action === 'confirm') {
                        MemberDestroy({id: this.$route.query.id}).then((res) => {
                            if (res.code == 0) {
                                done();
                                this.back();
                            }
                        });
                    } else {
                        done();
                    }
                },
            }).catch(() => {});
        },
        back() {
            this.$router.go(-1);
        },
    }
}
</script>

<style scoped>


</style>
